<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../../pqgrid/pqgrid.min.css" />
    <script src="../../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../../pqgrid/themes/office/pqgrid.css" />

<script>
    
    $(function () {
        var data = [[1, 'Exxon Mobil', '339938.0', '36130.0'],
            [2, 'Wal-Mart Stores', '315654.0', '11231.0'],
			[3, 'Royal Dutch Shell', '306731.0', '25311.0'],
			[4, 'BP', '267600.0', '22341.0'],
			[5, 'General Motors', '192604.0', '-10567.0'],
			[6, 'Chevron', '189481.0', '14099.0'],
			[7, 'DaimlerChrysler', '186106.3', '3536.3'],
			[8, 'Toyota Motor', '185805.0', '12119.6'],
			[9, 'Ford Motor', '177210.0', '2024.0'],
			[10, 'ConocoPhillips', '166683.0', '13529.0'],
			[11, 'General Electric', '157153.0', '16353.0'],
			[12, 'Total', '152360.7', '15250.0'],
			[13, 'ING Group', '138235.3', '8958.9'],
			[14, 'Citigroup', '131045.0', '24589.0'],
			[15, 'AXA', '129839.2', '5186.5'],
			[16, 'Allianz', '121406.0', '5442.4'],
			[17, 'Volkswagen', '118376.6', '1391.7'],
			[18, 'Fortis', '112351.4', '4896.3'],
			[19, 'Crédit Agricole', '110764.6', '7434.3'],
			[20, 'American Intl. Group', '108905.0', '10477.0']];


        var obj = {
            width: 400,
            height: 360,
            showTop: false,
            showBottom: false,
            //collapsible: false,
            showHeader: false,
            roundCorners: false,
            rowBorders: false,
            columnBorders: false,                                    
            selectionModel: { type: 'cell' },
            numberCell: { show: false },
            stripeRows: false,
            title: "Grid Constituents",
            toolbar: {
                items: [
                { type: "button", label: 'button on toolbar' }
            ]
            }
        };
        obj.colModel = [
            { title: "Rank", width: 100, dataType: "integer" },
            { title: "Company", width: 200, dataType: "string" },
            { title: "Revenues ($ millions)", width: 170, dataType: "float", align: "right" },
            { title: "Profits ($ millions)", width: 170, dataType: "float", align: "right" }
        ];
        obj.dataModel = { data: data };

        var $grid = $("#grid_parts").pqGrid(obj);

        $("#grid_parts_topVisible").change(function (evt) {
            $grid.pqGrid("option", "showTop", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "showTop"));

        $("#grid_parts_showTitle").change(function (evt) {
            $grid.pqGrid("option", "showTitle", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "showTitle"));

        $("#grid_parts_showToolbar").change(function (evt) {
            $grid.pqGrid("option", "showToolbar", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "showToolbar"));

        $("#grid_parts_collapsible").change(function (evt) {
            $grid.pqGrid("option", "collapsible.on", $(this).is(":checked"));
            //$grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "collapsible"));

        $("#grid_parts_header").change(function (evt) {
            $grid.pqGrid("option", "showHeader", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "showHeader"));

        $("#grid_parts_columnBorders").change(function (evt) {
            $grid.pqGrid("option", "columnBorders", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "columnBorders"));

        $("#grid_parts_rowBorders").change(function (evt) {
            $grid.pqGrid("option", "rowBorders", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "rowBorders"));

        $("#grid_parts_freezeRows").change(function (evt) {
            $grid.pqGrid("option", "freezeRows", $(this).is(":checked") ? 2 : 0);
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "freezeRows") > 0 ? true : false);

        $("#grid_parts_freezeCols").change(function (evt) {
            $grid.pqGrid("option", "freezeCols", $(this).is(":checked") ? 1 : 0);
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "freezeCols") > 0 ? true : false);

        $("#grid_parts_oddRowsHighlight").change(function (evt) {
            $grid.pqGrid("option", "stripeRows", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "stripeRows"));

        $("#grid_parts_numberCell").change(function (evt) {
            $grid.pqGrid("option", "numberCell.show", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "numberCell.show"));

        $("#grid_parts_autoHeight").change(function (evt) {            
            $grid.pqGrid("option", "height", $(this).is(":checked") ? 'flex' : 360);
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "height")=='flex');

        $("#grid_parts_autoWidth").change(function (evt) {            
            $grid.pqGrid("option", "width", $(this).is(":checked")? 'flex': 400);
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "width")=='flex');

        $("#grid_parts_autoFit").change(function (evt) {
            $grid.pqGrid("option", "scrollModel.autoFit", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "scrollModel.autoFit"));

        $("#grid_parts_resizable").change(function (evt) {
            $grid.pqGrid("option", "resizable", $(this).is(":checked"));
            $grid.pqGrid("refresh");
        }).attr("checked", $grid.pqGrid("option", "resizable"));

        $("#grid_parts_paging").change(function (evt) {
            var paging = "";
            if ($(this).is(":checked")) {
                paging = "local";
            }
            $grid.pqGrid("option", "pageModel.type", paging);
            $grid.pqGrid("refreshView");
        }).attr("checked", ($grid.pqGrid("option", "pageModel.type") == "local") ? true : false);

        $("#grid_parts_swipe").change(function (evt) {
            $grid.pqGrid("option", "swipeModel.on", $(this).is(":checked"));
        }).attr("checked", $grid.pqGrid("option", "swipeModel.on"));

        $("#grid_parts_roundCorners").change(function (evt) {
            $grid.pqGrid("option", "roundCorners", $(this).is(":checked"));
        }).attr("checked", $grid.pqGrid("option", "roundCorners"));
    });

        
</script>    
</head>
<body>

<div id="grid_parts" style="margin: 20px auto; display: inline-block;"></div>

<div style="padding: 0px 20px; width: 180px; text-align: left; margin-top: 20px; vertical-align: top; display: inline-block;">

    <input id="grid_parts_topVisible" type="checkbox">
    <label for="grid_parts_topVisible">Top </label>
    <br>

    <input id="grid_parts_showTitle" type="checkbox">
    <label for="grid_parts_showTitle">Title </label>
    <br>

    <input id="grid_parts_showToolbar" type="checkbox">
    <label for="grid_parts_showToolbar">Toolbar </label>
    <br>

    <input id="grid_parts_collapsible" type="checkbox">
    <label for="grid_parts_collapsible">collapsible </label>
    <br>

    <input id="grid_parts_header" type="checkbox">
    <label for="grid_parts_header">Column Headers </label>
    <br>

    <input id="grid_parts_columnBorders" type="checkbox">
    <label for="grid_parts_columnBorders">Column Borders</label>
    <br>

    <input id="grid_parts_freezeCols" type="checkbox">
    <label for="grid_parts_freezeCols">Freeze columns</label>
    <br>

    <input id="grid_parts_rowBorders" type="checkbox">
    <label for="grid_parts_rowBorders">Row Borders</label>
    <br>

    <input id="grid_parts_freezeRows" type="checkbox">
    <label for="grid_parts_freezeRows">Freeze rows</label>
    <br>

    <input id="grid_parts_oddRowsHighlight" type="checkbox">
    <label for="grid_parts_oddRowsHighlight">Stripe Rows (Office theme)</label>
    <br>

    <input id="grid_parts_numberCell" type="checkbox">
    <label for="grid_parts_numberCell">Number Column</label>
    <br>

    <input id="grid_parts_autoHeight" type="checkbox">
    <label for="grid_parts_autoHeight">Flex Height</label>
    <br>

    <input id="grid_parts_autoWidth" type="checkbox">
    <label for="grid_parts_autoWidth">Flex Width</label>
    <br>

    <input id="grid_parts_autoFit" type="checkbox">
    <label for="grid_parts_autoFit">AutoFit Columns</label>
    <br>

    <input id="grid_parts_resizable" type="checkbox">
    <label for="grid_parts_resizable">Resizable</label>
    <br>

    <input id="grid_parts_paging" type="checkbox">
    <label for="grid_parts_paging">Local Paging</label>
    <br>

    <input id="grid_parts_swipe" type="checkbox">
    <label for="grid_parts_swipe">Swipe Gesture</label>
    <br>

</div>


</body>

</html>
